<template>
  <div>
    <el-card class="page-tools">
      <el-row type="flex" justify="space-between" align="middle">
        <el-form :inline="true">
          <el-form-item v-if="tabname==='2'" label="租借进度">
            <el-select v-model="searchItem.progress" placeholder="请选择">
              <el-option
                v-for="item in items"
                :key="item.progress"
                :label="item.label"
                :value="item.progress"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="租借人">
            <el-input v-model="searchItem.student" placeholder="请输入租借人" />
          </el-form-item>
          <el-form-item label="设备名称">
            <el-input v-model="searchItem.name" placeholder="请输入设备名" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" @click="searchHandle">搜索</el-button>
          </el-form-item>
        </el-form>
      </el-row>
    </el-card>
    <el-table border :data="equiplist">
      <el-table-column type="index" label="序号" width="100" />
      <el-table-column label="名称" prop="name" />
      <el-table-column label="照片" prop="photoid" width="100">
        <template slot-scope="scope">
          <el-image :src="`http://124.222.15.71:8191/api/hold/imgdownload?fileName=${scope.row.photoid}`" fit="fill" :lazy="true" />
        </template>
      </el-table-column>
      <el-table-column label="租借原因" prop="reason" />
      <el-table-column label="租借人" prop="student" />
      <el-table-column label="租借进度">
        <template slot-scope="scope">
          <el-tag :type="getStatus(scope.row.progress).type">{{ getStatus(scope.row.progress).label }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="租借时间" prop="lendtime" />
      <el-table-column label="归还时间">
        <template slot-scope="scope">
          <span v-if="scope.row.returntime||scope.row.progress!==1">{{ scope.row.returntime }}</span>
          <el-tag v-else-if="latedReturn(scope.row) <= 0" type="warning">待归还，余剩{{ -latedReturn(scope.row) }}天</el-tag>
          <el-tag v-else type="danger">已逾期{{ latedReturn(scope.row) }}天</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" sortable="">
        <template slot-scope="scope">
          <el-button :disabled="!checkPermission('api-lenddetail-get')" type="text" size="small" @click="$router.push(`equip/lendequip?id=${scope.row.lendid}&isCheck=1`)">查看</el-button>
          <el-button v-if="scope.row.progress===3" :disabled="!checkPermission('api-lend-put')" type="text" size="small" @click="delLend(scope.row.lendid)">删除记录</el-button>
          <el-button v-if="scope.row.progress===0||scope.row.progress===2" :disabled="!checkPermission('api-lendaudit-put')" type="text" size="small" @click="$router.push(`equip/lendequip?id=${scope.row.lendid}&isAudit=${scope.row.progress}&isCheck=1`)">审核</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页组件 -->
    <el-row type="flex" justify="center" align="middle" style="height: 60px">
      <el-pagination
        layout="prev, pager, next"
        :page-size="page.size"
        :current-page="page.page"
        :total="page.total"
        @current-change="changePage"
      />
    </el-row>
  </div>
</template>

<script>
import { getEquipHistoryByProgress, delLend, getWaitAuditEquipHistory } from '@/api/equip'

export default {
  props: {
    tabname: {
      type: String,
      default: '1'
    },
    focusTab: {
      type: String,
      default: '1'
    }
  },
  data() {
    return {
      searchItem: {
        progress: '',
        student: '',
        name: ''
      },
      showDialog: false,
      loading: false,
      equiplist: [], // 接数据的
      page: {
        page: 1, // 当前页码
        size: 5,
        total: 0 // 总数
      },
      items: [
        { type: '', label: '租借待审核', progress: 0 },
        { type: 'success', label: '借用中', progress: 1 },
        { type: 'warning', label: '归还待审核', progress: 2 },
        { type: 'info', label: '已结束', progress: 3 },
        { type: 'danger', label: '租借审核未通过', progress: -1 },
        { type: 'danger', label: '归还审核未通过', progress: -2 }
      ]
    }
  },
  methods: {
    changeFileList(val) {
      this.photoList = val
    },
    changePage(newPage) {
      this.page.page = newPage
      this.getListData()
    },
    searchHandle() {
      const searchItem = {}
      for (const key in this.searchItem) {
        if (this.searchItem[key] !== '') {
          searchItem[key] = this.searchItem[key]
        }
      }
      this.getListData(searchItem)
    },
    getListData(searchItem, Tab) {
      const focusTab = Tab || this.focusTab

      if (this.tabname === focusTab && focusTab === '1') {
        this.getWaitAuditEquipHistory(searchItem)
      } else if (this.tabname === focusTab && focusTab === '2') {
        this.getEquipHistoryByProgress(searchItem)
      }
    },
    async getEquipHistoryByProgress(searchItem) {
      this.loading = true
      const { total, rows } = await getEquipHistoryByProgress(this.page.page, this.page.size, searchItem)
      this.page.total = total
      this.equiplist = rows
      this.loading = false
    },
    async getWaitAuditEquipHistory(searchItem) {
      this.loading = true
      const { total, rows } = await getWaitAuditEquipHistory(this.page.page, this.page.size, searchItem)
      this.page.total = total
      this.equiplist = rows
      this.loading = false
    },
    delLend(id) {
      this.$confirm('确定要删除该记录吗').then(() => {
        // 如果点击了确定就会进入then
        return delLend(id) // 返回promise对象
      }).then(() => {
        this.$message.success('删除成功')
        this.getEquipHistoryByProgress()
        this.lendHistoryByStudent()
      })
    },
    getStatus(progress) {
      return this.items.find(val => val.progress === progress)
    },
    latedReturn(row) {
      const limit = Number(row.timelimit)
      const lendDate = new Date(row.lendtime)
      const nowDate = new Date()
      const lendedtime = Math.floor((nowDate.getTime() - lendDate.getTime()) / (24 * 3600 * 1000))
      return lendedtime - limit
    }
  }
}
</script>

<style>
</style>
